<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background: #f0f2f5;
        }
        .container {
            max-width: 400px;
            margin: 50px auto;
            padding: 30px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 12px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        button:hover {
            background: #096dd9;
        }
        .error-msg {
            color: #ff4d4f;
            font-size: 0.9em;
            margin-top: 4px;
            height: 18px;
        }
        .extra-links {
            margin-top: 20px;
            text-align: center;
        }
        .extra-links a {
            color: #666;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 style="text-align: center; margin-bottom: 30px;">用户登录</h2>

    <form id="loginForm" onsubmit="return handleLogin(event)">
        <!-- 账号输入 -->
        <div class="form-group">
            <label>账号</label>
            <input
                type="text"
                id="username"
                name="username"
                placeholder="请输入用户名或手机号"
                required
            >
            <div class="error-msg" id="usernameError"></div>
        </div>

        <!-- 密码输入 -->
        <div class="form-group">
            <label>密码</label>
            <div style="position: relative;">
                <input
                    type="password"
                    id="password"
                    name="password"
                    placeholder="请输入密码"
                    required
                >
                <span id="togglePassword" style="position: absolute; right: 10px; top: 10px; cursor: pointer; user-select: none;">
                    👁️
                </span>
            </div>
            <div class="error-msg" id="passwordError"></div>
        </div>

        <!-- 角色选择 -->
        <div class="form-group">
            <label>登录角色</label>
            <select id="role" name="role" required>
                <option value="">请选择角色</option>
                <option value="student">学员</option>
                <option value="coach">教练</option>
                <option value="admin">管理员</option>
            </select>
            <div class="error-msg" id="roleError"></div>
        </div>

        <!-- 记住我 -->
        <div class="form-group" style="display: flex; align-items: center; margin-bottom: 25px;">
            <input
                type="checkbox"
                id="rememberMe"
                style="width: auto; margin-right: 8px;"
            >
            <label for="rememberMe" style="margin: 0; font-weight: normal;">7天内自动登录</label>
        </div>

        <button type="submit" id="loginBtn">登录</button>

        <!-- 辅助链接 -->
        <div class="extra-links">
            <a href="/xwy/zhuce">立即注册</a>
        </div>
    </form>
</div>

<script>
    // 密码可见性切换
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('password');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            this.textContent = '🔒';
        } else {
            passwordInput.type = 'password';
            this.textContent = '👁️';
        }
    });

    // 登录处理
    function handleLogin(e) {
        e.preventDefault();

        // 获取表单数据
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value;
        const role = document.getElementById('role').value;
        const rememberMe = document.getElementById('rememberMe').checked;

        // 清除错误信息
        document.getElementById('usernameError').textContent = '';
        document.getElementById('passwordError').textContent = '';
        document.getElementById('roleError').textContent = '';

        // 基础验证
        if (!username) {
            document.getElementById('usernameError').textContent = '请输入账号';
            return false;
        }

        if (!password) {
            document.getElementById('passwordError').textContent = '请输入密码';
            return false;
        }

        if (!role) {
            document.getElementById('roleError').textContent = '请选择角色';
            return false;
        }

        // 禁用登录按钮，显示加载状态
        const loginBtn = document.getElementById('loginBtn');
        loginBtn.disabled = true;
        loginBtn.textContent = '登录中...';

        // 发送登录请求
        const formData = new FormData();
        formData.append('account', username);
        formData.append('password', password);
        formData.append('role', role);
        formData.append('rememberMe', rememberMe);
        
        fetch('/xwy/denglu', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP错误! 状态码: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // 显示成功消息
                const successMsg = document.createElement('div');
                successMsg.style.color = '#52c41a';
                successMsg.style.textAlign = 'center';
                successMsg.style.padding = '10px';
                successMsg.style.marginTop = '10px';
                successMsg.textContent = '登录成功，正在跳转...';
                document.getElementById('loginForm').appendChild(successMsg);
                
                // 跳转到对应角色的首页
                setTimeout(() => {
                    window.location.href = data.redirectUrl || '/xwy/student/index';
                }, 1000);
            } else {
                document.getElementById('usernameError').textContent = data.message || '账号、密码或角色错误';
                loginBtn.disabled = false;
                loginBtn.textContent = '登录';
            }
        })
        .catch(error => {
            console.error('登录请求失败:', error);
            document.getElementById('usernameError').textContent = '登录失败，请稍后重试';
            loginBtn.disabled = false;
            loginBtn.textContent = '登录';
        });

        return false;
    }
</script>
</body>
</html>